<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="closeModal"
    title="接收父组件参数"
    :helpMessage="['接收id, 查询详情等场景']"
    :destroyOnClose="false"
  >
    <p> 接收到的参数:{{ receiveData }} </p>
    <p> 用户id:<input class="b-1" :value="receiveData.id" /> </p>
    <p> 用户名:<input class="b-1" :value="receiveData.name" /> </p>
    <p> destroyOnClose属性:<input class="b-1" placeholder="测试关闭清理" /> </p>
  </BasicModal>
</template>
<script lang="ts" setup>
  // BasicModal 和 useModalInner 为 vben 基于 ant Modal 封装的组件
  import { BasicModal, useModalInner } from '@/components/Modal';

  interface User {
    id?: number;
    name?: string;
  }

  // 定义变量，接收参数
  let receiveData: User = {};

  // register 绑定组件, closeModal: 关闭弹窗, setModalProps: 设置窗口参数
  const [register, { closeModal }] = useModalInner((data) => {
    console.log('接收到参数:', data);
    receiveData = data;
  });
</script>
